// ui/components/CenterColumn.js
export default {
  name: 'CenterColumn',
  props: {
    chatHistory: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  // Since the script was empty, setup is minimal or can be omitted if not needed.
  // If we re-introduce logic (like processedChatHistory), it would go here.
  setup(props) {
    // const { computed } = Vue; 
    // const processedChatHistory = computed(() => {
    //   return props.chatHistory.map(msg => ({
    //     ...msg,
    //     formattedTimestamp: new Date(msg.timestamp).toLocaleString()
    //   }));
    // });
    // return { processedChatHistory }; // Only if used in template
    return {}; // Or return nothing if setup does nothing for the template
  },
  template: `
  <div class="center-column-container">
    <div v-if="chatHistory && chatHistory.length > 0" class="chat-messages-list">
      <div v-for="message in chatHistory" :key="message.message_id" class="chat-message-item">
        <div class="message-sender">{{ message.sender_nickname }}:</div>
        <div class="message-content" v-html="message.content"></div>
        <!-- Assuming content can be HTML, otherwise use {{ message.content }} -->
        <div v-if="message.tags && message.tags.length > 0" class="message-tags">
          Tags: {{ message.tags.join(', ') }}
        </div>
        <div class="message-timestamp">{{ new Date(message.timestamp).toLocaleString() }}</div>
      </div>
    </div>
    <div v-else class="no-messages">
      <p>暂无聊天记录或筛选结果为空。</p>
    </div>
  </div>
  `
};